<template>
  <div :class="classes" :style="styles">
    <template v-if="type === 'notice'">
      <div :class="contentClasses" ref="content" v-html="content"></div>
      <div :class="contentWithIcon">
        <render-cell :render="renderFunc"></render-cell>
      </div>
      <a :class="[baseClass + '-close']" @click="close" v-if="closable">
        <i class="haloe-icon haloe-icon-ios-close"></i>
      </a>
    </template>
    <template v-if="type === 'message'">
      <div :class="messageContentClasses" ref="content">
        <div :class="[baseClass + '-content-text']" v-html="content"></div>
        <div :class="[baseClass + '-content-text']">
          <render-cell :render="renderFunc"></render-cell>
        </div>
        <a :class="[baseClass + '-close']" @click="close" v-if="closable">
          <i class="haloe-icon haloe-icon-ios-close"></i>
        </a>
      </div>
    </template>
  </div>
</template>
<script>
import RenderCell from '../render';
import { isClient } from '../../../utils/index';

export default {
  components: {
    RenderCell
  },
  props: {
    prefixCls: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 1.5
    },
    type: {
      type: String
    },
    content: {
      type: String,
      default: ''
    },
    withIcon: Boolean,
    render: {
      type: Function
    },
    hasTitle: Boolean,
    styles: {
      type: Object,
      default: function() {
        return {
          right: '50%'
        };
      }
    },
    closable: {
      type: Boolean,
      default: false
    },
    className: {
      type: String
    },
    name: {
      type: String,
      required: true
    },
    onClose: {
      type: Function
    },
    transitionName: {
      type: String
    },
    background: {
      type: Boolean,
      default: false
    },
    msgType: {
      type: String
    }
  },
  data () {
    return {
      withDesc: false
    };
  },
  computed: {
    baseClass () {
      return `${this.prefixCls}-notice`;
    },
    renderFunc () {
      return this.render || function () {};
    },
    classes () {
      return [
        this.baseClass,
        {
          [`${this.className}`]: !!this.className,
          [`${this.baseClass}-closable`]: this.closable,
          [`${this.baseClass}-with-desc`]: this.withDesc,
          [`${this.baseClass}-with-background`]: this.background
        }
      ];
    },
    contentClasses () {
      return [
        `${this.baseClass}-content`,
        this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
      ];
    },
    messageContentClasses () {
      return [
        `${this.baseClass}-content`,
        {
          [`${this.baseClass}-content-${this.msgType}`]: this.msgType,
          [`${this.baseClass}-content-background`]: this.background
        }
      ];
    },
    contentWithIcon () {
      return [
        this.withIcon ? `${this.prefixCls}-content-with-icon` : '',
        !this.hasTitle && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : ''
      ];
    },
    messageClasses () {
      return [
        `${this.baseClass}-content`,
        this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
      ];
    }
  },
  methods: {
    clearCloseTimer () {
      if (this.closeTimer) {
        clearTimeout(this.closeTimer);
        this.closeTimer = null;
      }
    },
    close () {
      this.clearCloseTimer();
      this.onClose();
      this.$parent.$parent.close(this.name);
    },
    handleEnter (el) {
      if (this.type === 'message') {
        el.style.height = el.scrollHeight + 'px';
      }
    },
    handleLeave (el) {

      if (this.type === 'message') {
        // 优化一下，如果当前只有一个 Message，则不使用 js 过渡动画，这样更优美
        if (isClient && document.getElementsByClassName('haloe-message-notice').length !== 1) {
          el.style.height = 0;
          el.style.paddingTop = 0;
          el.style.paddingBottom = 0;
        }
      }
    }
  },
  mounted () {
    this.handleEnter(this.$el);
    this.clearCloseTimer();

    if (this.duration !== 0) {
      this.closeTimer = setTimeout(() => {
        this.close();
      }, this.duration * 1000);
    }

    // check if with desc in Notice component
    if (this.prefixCls === 'haloe-notice') {
      let desc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0];
      this.withDesc = this.render ? true : (desc ? desc.innerHTML !== '' : false);
    }
  },
  beforeUnmount () {
    this.handleLeave(this.$el);
    this.clearCloseTimer();
  }
};
</script>
